<template>
    <!-- <div class="mt-3 ">
        <div class="card flex justify-between mb-5">
            <Card v-for="item in data" :cardDate="item"/>
        </div>

        <el-row :gutter="24">

    <el-col style="display: flex; margin-left: 15px;" class="bg-light-50 h-20 flex-col justify-center items-center" :span="3" v-for="(item,index) in rowList">
        <el-icon><House /></el-icon>
    {{ item.title }}
    </el-col>

  </el-row>

    </div> -->
    <EchartsCard :width="'900px'" :height="'600px'"></EchartsCard>
</template>

<script setup >
    import Card from "@/components/Card.vue"
    import EchartsCard from "@/components/EchartsCard.vue"

    const data = [
        {
            title:'订单支付',
            timer:'年',
            num:51,
            bottomTitle:'总支付订单',
            bottomNum:51
        },
        {
            title:'订单支付',
            timer:'年',
            num:51,
            bottomTitle:'总支付订单',
            bottomNum:51
        },
        {
            title:'订单支付',
            timer:'年',
            num:51,
            bottomTitle:'总支付订单',
            bottomNum:51
        },
        
    ]
    const rowList =[
        {title:'用户',router:'/user',icons:'<Plus />'},
        {title:'用户',router:'/user',icons:'<Plus />'},
        {title:'用户',router:'/user',icons:'<Plus />'},
        {title:'用户',router:'/user',icons:'<Plus />'},
        {title:'用户',router:'/user',icons:'<Plus />'},
        {title:'用户',router:'/user',icons:'<Plus />'},
        {title:'用户',router:'/user',icons:'<Plus />'},

    ]

</script>

<style scoped>
  .box-card{
    width: 300px !important;
  }
  .el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>